<template>
	<div style='background: #fff'>
		<div class='content-title'>密钥管理</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' @click='addKey'>创建密钥</button>
			<div style="padding:1px">
				<Table :columns="keyList" :data="keyData" stripe></Table>
			</div>
	    	<!-- <div style='overflow: hidden'>
	    		<Page :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
	    	</div> -->
		</div>
		<!-- 创建密钥 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>{{dataId?'编辑密钥':'创建密钥'}}</span>
            </p>
            <div>
               <Form :label-width='75'>
                    <FormItem label='名称'>
                        <p slot='label'><span class='star'>*</span>名称</p>
                        <Input v-model='formItem.name' placeholder='请输入名称'></Input>
                    </FormItem>
                    <FormItem label='密钥'>
                        <p slot='label'><span class='star'>*</span>密钥</p>
                    	<Input v-model='formItem.secret' placeholder='请输入密钥'></Input>
                    </FormItem>
                    <FormItem label='有效期'>
                        <p slot='label'><span class='star'>*</span>有效期</p>
                    	<InputNumber v-model='expires' :min='0' placeholder='请输入有效期' style='width:49%;height:40px'></InputNumber>
                        <Select v-model='time' style="width:49%;height:40px;float:right">
                            <Option v-for="item in configData.time" :value="item.value" :key="item">{{item.value}}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				keyList: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '秘钥',
                        key: 'secret'
                    },
                    {
                        title: '有效期',
                        key: 'expires'
                    },
                     {
                        title: '创建时间',
                        key: 'created_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                        }
                    },
                     {
                        title: '更新时间',
                        key: 'updated_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                keyData: [],
                pagination:{},
                currentPage:1,
                dataId:0,
                formItem:{
                    name:'',
                    secret:'',
                },
                expires:0,
                time:'',
                configData:{}
			}
		},
        created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            this.fetch('/home/app/auth/info/auth').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
		methods:{
            getData(){
                this.fetch('/home/app/auth/auth').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.keyData = res.data.data;
                    }
                })
            },
            // changePage(page){
            //     this.currentPage = page;
            //     this.getData();
            // },
            //创建密钥
			addKey(){
				this.modal = true;
                this.dataId = 0;
                this.formItem = {}
                this.expires = 0
                this.time=''
			},
			cancel(){
                this.modal = false;
			},
			sure(){
                if(!this.formItem.name){
                    this.$Message.warning('请填写名称')
                    return;
                }
                if(!this.formItem.secret){
                    this.$Message.warning('请填写密钥')
                    return;
                }
                if(!this.expires || !this.time){
                    this.$Message.warning('请填写有效期')
                    return;
                }
                let data = {
                    name:this.formItem.name,
                    secret:this.formItem.secret,
                    expires:this.expires +' '+ this.time
                }
                if(this.dataId){
                    data.id = this.dataId;
                }
				this.fetch('/home/app/auth/add/auth',data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success(this.dataId?'编辑成功':'新增成功')
                        this.getData();
                        this.modal = false;
                    }
                })
			},
            edit(row){
                this.dataId = row.id;
                this.modal = true;
                this.fetch('/home/app/auth/auth/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        let data = res.data.data;
                        this.formItem = data;
                        this.expires = data.expires.split(' ')[0];
                        this.time = data.expires.split(' ')[1];
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/auth/del/auth/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
                
            }
		}
	}
</script>
